<template>
<!--<router-link to="/yibiaopan"></router-link>
<router-link to="/jiaoshiguanli"></router-link>
<router-link to="/xueshengguanli"></router-link>-->





      <div class="common-layout">
      
    <el-container>
      <el-aside width="200px" >
        <img src="@/assets/测试图片.jpg" alt="">
          <!-- 菜单开始 -->
        <el-menu  unique-opened >
          
            <!-- 次级菜单 -->
            <el-menu-item index="1" >
              
                <el-icon><Odometer /></el-icon>
                仪表盘
                </el-menu-item>


            <el-sub-menu index="2">
            <template #title>
                <el-icon><Menu /></el-icon>常用设置
            </template>
            <!-- 次级菜单项 -->

            <el-menu-item-group>
                <el-menu-item index="2-1" >教师管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="2-2" >学生管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="2-3" >公告管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="2-4" >系统配置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="2-5" >判题服务器</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>


            <el-sub-menu index="3" >
              <template #title>
                <el-icon><Aim /></el-icon>问题
              </template>
                <el-menu-item-group>
                <el-menu-item index="3-1" >问题列表</el-menu-item>
                </el-menu-item-group>

                <el-menu-item-group>
                <el-menu-item index="3-2" >增加题目</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                <el-menu-item index="3-3" >导入导出题目</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
                

                <el-sub-menu index="4">
                  <template #title>
                <el-icon><Trophy /></el-icon>
                比赛&练习
                  </template>
                  <el-menu-item-group>
                  <el-menu-item index="4-1" >比赛列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="4-2" >创建比赛</el-menu-item>
            </el-menu-item-group>
            
                </el-sub-menu>
                <el-sub-menu index="5">
                  <template #title>
                <el-icon><Collection /></el-icon>
                课程
                  </template>
                  <el-menu-item-group>
                <el-menu-item index="5-1" >课程列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="5-2" >创建课程</el-menu-item>
            </el-menu-item-group>
                </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-dropdown>
      
        <el-icon><Search /></el-icon>
        <el-icon><Share /></el-icon>
        username<el-icon><arrow-down /></el-icon>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>logout</el-dropdown-item>
          
        </el-dropdown-menu>
      </template>
    </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
          <el-card >
            
    <template #header>
    
      <div >
        <span>标题</span>
        
      </div>
    </template>
    <div  style="height:200px;text-align:center;">主体内容</div>
  </el-card></el-main>
        <el-footer>
            Build Version:20210929bd
            
            </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import { Menu,Trophy,Collection,Odometer,Aim, Search,Share,ArrowDown} from '@element-plus/icons-vue'

export default{
    components:{
        
        Menu,
        Trophy,
        Collection,
        
        Odometer,
        Aim,
        Search,
        Share,
        ArrowDown
       
    }
    
}

</script>

<style>

.el-header{
    background-color: #F9FAFC;
    top: 0px;
    text-align: right;
    }
   
.el-footer{
    background-color: #EDECEC;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 20px;
}
.el-aside{
    background-color: white;
    text-align: center;
    line-height: 200px;
}
.el-main{
    background-color: #EDECEC;
    text-align:left;
    
}
.el-dropdown{
  top: 20px;
  
}

</style>

